<template>
  <el-card style="width: 100%; height: 100vh" class="hidden-scrollbar">
    <template #header>
      <div class="card-header">
        <span style="color: #c4cbcf">住宿订单 - </span><span>订房订单</span>
      </div>
    </template>
    <div class="card-content">
      <el-card style="width: 100%; height: auto" class="hidden-scrollbar">
        <div style="margin-top: 10px">
          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            ">
            <!-- 左侧：房客搜索 -->
            <el-form :model="searchForm" class="search-form" style="flex: 1">
              <el-select v-model="searchForm.guestType" placeholder="全部房型" style="width: 110px; margin-right: 10px">
                <el-option label="房客姓名" value="1" />
                <el-option label="证件号" value="2" />
                <el-option label="手机号" value="3" />
                <el-option label="房号" value="4" />
              </el-select>
              <el-select v-model="searchForm.guestType" placeholder="全部状态" style="width: 110px; margin-right: 10px">
                <el-option label="房客姓名" value="1" />
                <el-option label="证件号" value="2" />
                <el-option label="手机号" value="3" />
                <el-option label="房号" value="4" />
              </el-select>
              <el-input style="width: 240px" placeholder="请输入查询关键字" clearable />
            </el-form>

            <!-- 中间：导出按钮 -->
            <!-- <el-button style="margin: 0 20px">导出明细</el-button> -->

            <!-- 右侧：时间选择 -->
            <el-form :model="searchForm" class="search-form" style="justify-content: flex-end; flex: 1">
              <el-select v-model="searchForm.timeType" placeholder="入住时间" style="width: 110px">
                <el-option label="入住时间" value="1" />
                <el-option label="预定时间" value="2" />
                <el-option label="离店时间" value="3" />
              </el-select>
              <el-date-picker style="width: 220px" v-model="searchForm.dateRange" type="daterange" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
              <el-button>搜索</el-button>
            </el-form>
          </div>
          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
            ">
            <!-- 左侧：房客搜索 -->
            <el-form :model="searchForm" class="search-form" style="flex: 1">
              <el-select v-model="searchForm.guestType" placeholder="全部付费类型" style="width: 140px; margin-right: 10px">
                <el-option label="房客姓名" value="1" />
                <el-option label="证件号" value="2" />
                <el-option label="手机号" value="3" />
                <el-option label="房号" value="4" />
              </el-select>
              <el-select v-model="searchForm.guestType" placeholder="全部订单类型" style="width: 140px; margin-right: 10px">
                <el-option label="房客姓名" value="1" />
                <el-option label="证件号" value="2" />
                <el-option label="手机号" value="3" />
                <el-option label="房号" value="4" />
              </el-select>
            </el-form>

            <!-- 中间：导出按钮 -->

            <!-- 右侧：时间选择 -->
            <el-form :model="searchForm" class="search-form" style="justify-content: flex-end; flex: 1">
              <el-button style="margin: 0 20px">导出记录</el-button>
            </el-form>
          </div>
        </div>
      </el-card>
      <el-card style="width: 100%; height: 60vh; margin-top: 10px" class="hidden-scrollbar">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="orderNumber" label="订单编号" />
          <el-table-column prop="roomType" label="房型（房号）" />
          <el-table-column prop="roomName" label="房客姓名" />
          <el-table-column prop="phone" label="手机号码" />
          <el-table-column prop="startTime" label="入住时间">
            <template #default="scope">
              <span>{{
                moment(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="离店时间">
            <template #default="scope">
              <span>{{
                moment(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="实付金额" />
          <el-table-column prop="sourceInformation" label="类型">
            <template #default>
              <span>预定</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-link type="primary" size="small"> 操作 </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { GetStayRecord, GetReservations } from "@/api/index";
import moment from "moment";
import { GetReservationRecordList } from "@/api/RoomConditionManagement/RoomCM";

onMounted(() => {
  GetReservation();
});

const searchForm = reactive({
  dateRange: "",
  checkInDate: "",
  roomType: "",
  status: "",
  guestName: "",
  checkOutDate: "",
});

const handleSearch = () => {
  // 处理查询逻辑
  console.log("Search params:", searchForm);
};

const handleReset = () => {
  Object.assign(searchForm, {
    dateRange: "",
    checkInDate: "",
    roomType: "",
    status: "",
    guestName: "",
    checkOutDate: "",
  });
};

const data = reactive({
  StayState: "",
  ReservationName: "",
  CheckInTime: "",
  CheckOutTime: "",
});
//
const tableData = ref([]);
//获取住宿记录
const GetReservation = () => {
  GetReservationRecordList().then((res) => {
    tableData.value = res.data;
  });
  // GetStayRecord(data).then((res) => {
  //   tableData.value = res.data;
  // });
};
</script>

<style scoped></style>

<style>
.search-form {
  display: flex;
  align-items: center;
}
</style>